Overview ( top )

Content Panels are full width images that sit within your media content, and fade between each other to provide readers with changing, dynamic content.

1. panel images should be at least 1000px wide: the placeholder is 1000px wide, so anything smaller will not cover the entire width of the container. Larger images (e.g. 1920 x 1080 px) will be sized to fit.
2. panels require a minimum 2 images... a primary tile (what is shown first), and an alternate tile (what replaces the primary tile. There is no limit on how many images you can have over 2.
3. panel images will display, and at the last panel image will wrap and start at 1 again.

Code

The below is an example of the code, with an explanation of each line.

<content='slideshow' launch='thumbsonly': ov1.jpg ov2.jpg ov3.jpg >

• content='slideshow' is mandatory. It defines that this will be an slideshow.
• launch='thumbsonly' is optional. By default, the photo panel will pop up and cover 90% of the screen: this option will prevent. Thumbnail images must be enabled or there is no way to bring up the photo gallery.
• thumbs='off' is optional. By default, thumbnails of all images will be shown in the wiki page... and clicking on an image will start the slideshow beginning with the selected picture.
• button='back' is optional. Instead of closing the floating picture panel, the browser will go back to the previous page. Useful for photo galleries where there is no panel or thumbnail images shown.
• width='NNNpx' is optional. This forces thumbnail size to a certain NNN pixel width to more neatly display rows of thumbails. If you have thumbnail size differences, try setting the width to be the same as a "regular" thumbnail as displayed in the File Manager.

Panel lines consist of a single URL to each picture, and by default thumbnails will shown with a _tn suffix.

• For example, if the image URL was http://www.example.com/image1.jpg, then by default the thumbail used will be http://www.example.com/image1_tn.jpg.

You can override the thumbnail image used by adding a pipe (|) symbol followed by the thumbnail image.

• For example: http://www.example.com/image1_tn.jpg|http://www.example.com/alternate_thumbimage.jpg

How the example looks ( top )

Quick steps to use this feature ( top )

1. Use the example code above and preview a working baseline image panel.
2. Upload additional images that you want using File Manager and use regular thumbnails setting.
3. Edit or add/remove images to your requirements. Preview regularly to ensure your code is still working.